<template>
    <div class="mine-info-root">
        <el-breadcrumb style="margin-bottom: 10px;" separator="/">
            <el-breadcrumb-item>我的</el-breadcrumb-item>
            <el-breadcrumb-item>我的消息</el-breadcrumb-item>
        </el-breadcrumb>

        <el-table :data="tableData" style="width: 100%; max-height: 500px;min-height: 400px">
            <el-table-column
                label="商品id"
                width="180">
                <template slot-scope="props">
                    {{props.row.business ? props.row.business.id : ''}}
                </template>
            </el-table-column>
            <el-table-column
                label="商品名称"
                width="180">
                <template slot-scope="props">
                    {{props.row.business ? props.row.business.title : ''}}
                </template>
            </el-table-column>
            <el-table-column
                prop="content"
                label="留言内容">
            </el-table-column>
            <el-table-column
                label="意向交易人">
                <template slot-scope="props">
                    {{props.row.fromuser.name}}
                </template>
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                        @click="reply(scope.row)"
                        type="primary"
                        size="small"
                    >
                        回复
                    </el-button>
                    <el-button
                        @click="orderComplete(scope.row)"
                        type="danger"
                        size="small"
                    >
                        交易完成
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: right; margin: 20px">
            <el-pagination
                layout="prev, pager, next"
                @current-change="getList"
                :total="this.total"
            >
            </el-pagination>
        </div>
        <el-dialog title="回复" :visible.sync="addModalShow" width="30%" >
            <el-form ref="addFormRef" label-width="80px">
                <el-form-item label="名称">
                    <el-input
                        placeholder="请输入回复内容"
                        v-model="content"
                    ></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input
                        placeholder="请输入电话号码"
                        v-model="tel"
                    ></el-input>
                </el-form-item>
                
            </el-form>
			<div slot="footer">
				<el-button type="primary" @click="replyInfo">回复</el-button>
			</div>
        </el-dialog>
    </div>
</template>

<script>
import {serviceRequest} from "network/request.js";
export default {
    data() {
        return {
            tableData: [],
            addModalShow: false,
            
            content:  '',
            tel: '',

            offset: 0,
            total: 0,
            replyRow: {},
        };
    },
    computed: {
    },
    mounted() {
    },
    created() {
        this.getList();
        this.clean();
    },
    methods: {
        clean () {
            const params = {
                url: 'user/remind/clean',
                method: 'post',
            };
            serviceRequest(params)
            
        },
        reply(row) {
            this.replyRow = row;
            this.addModalShow = true;
            console.log(row);
        },
        replyInfo() {
            const params = {
                url: '/user/message/reply',
                method: 'post',
                data: {
                    to_user_id: this.replyRow.from_user_id,
                    content: this.content + '，我的电话号码是' + this.tel,
                    type: 1,
                    business_id: this.replyRow.business_id,

                }
            };
            serviceRequest(params).then(() => {
                this.$message.success('回复成功 ！');
            })
        },
        showPostModal() {
            this.addModalShow = true;
        },
        getList(page) {
            if ('number' === typeof page) {
                this.offset  = 10 * (page - 1);
            } else {
                this.offset = 0;
            }
            const params = {
                url: '/user/message/get',
                method: 'get',
                data: {
                    offset: this.offset,
                }
            }
            serviceRequest(params).then(res => {
                this.tableData = res.content.data;
                this.total = res.content.total;
            });
        },
        
        
        orderComplete(row) {
            const params = {
                url: '/user/order/success',
                method: 'post',
                data: {
                    user_id: row.from_user_id,
                    goods_id: row.business_id,

                }
            };
            serviceRequest(params).then(() => {
                this.$message.success('交易完成！');
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.mine-info-root {
    padding: 0 20px;
    background-color: #fff;
    margin-top: 50px;
}
</style>